<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="./source/alert/fontFace.css">
		<link rel="stylesheet" type="text/css" href="./source/alert/alert.css">
	</head>
	<body>
		<div id="app">
			<m-alert type="success" title="这是success的样式" style="background:rgba(255,0,0,0.3)" @close="close"></m-alert>
			<m-alert type="warning" title="这是warning的样式"></m-alert>
			<m-alert type="info" title="这是info的样式" :show-icon="false"></m-alert>
			<m-alert type="error" title="这是error的样式" :disabled-close="false">
				<template slot="titleTemp">
					<p>这是自定义提示信息</p>
					<p>这是自定义提示信息</p>
					<p>这是自定义提示信息</p>
					<p>这是自定义提示信息</p>
					<p>这是自定义提示信息</p>
					<p>这是自定义提示信息</p>
				</template>
				<i class="m-icon m-icon-menu" slot="iconTemp"></i>
			</m-alert>
		</div>
	</body> 
</html>
<script src="../../2.1.8/vue.js"></script>
<script>
	/*************************************************************
		type : 提示框的类型，默认是 普通信息 类型
		title : 提示信息内容
		disabledClose : 是否显示按钮
		showIcon : 是否显示提示信息前的 icon
		style : 自定义样式
	*************************************************************/
	Vue.component('m-alert',{
		props : {
			type : { // 
				type : String,
				default : 'info'
			},
			title : {
				type : String,
				default : '这是一个标题'
			},
			disabledClose : {
				type : Boolean,
				default : true
			},
			showIcon : {
				type : Boolean,
				default : true
			},
			style : String
		},
		computed : {
			getSkinType(){
				return `m-alert-${this.type}`;
			},
			getIconType(){
				return `m-icon-${this.type}`;
			}
		},
		template : `
			<div class="m-alert" :class="[getSkinType]" style="style">
				<slot name="iconTemp">
					<i  v-if="showIcon" class="m-icon" :class="[getIconType]"></i>
				</slot>
				<div class="m-content">
					<slot name="titleTemp">
						<span class="m-message">{{title}}</span>
					</slot>
					<i v-if="disabledClose" class="m-closebtn m-icon-close" @click="close"></i>
				</div>
			</div>
		`,
		methods : {
			close(){
				this.$emit('close','我关闭了！');
			}
		}
	});

	let vm = new Vue({
		el : '#app',
		methods : {
			close( msg ){
				alert( msg );
			}
		}
		
	});
	
</script>